<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, index) in detail.pics" :key="index">
				<!-- 图片区域 -->
				<image :src="item.pics_big" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<!-- 价格区域 -->
			<view class="price">￥{{ detail.goods_price || 0 }}</view>
			<!-- 主体信息区域 -->
			<view class="goods-body">
				<!-- 标题区域 -->
				<view class="title">{{ detail.goods_name }}</view>
				<!-- 收藏区域 -->
				<view class="collect">
					<uni-icons type="star" size="19"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费区域 -->
			<view class="freight">快递：免运费</view>
		</view>
		<!-- 商品详情区域 -->
		<rich-text :nodes="detail.goods_introduce"></rich-text>
		<!-- 底部商品导航 -->
		<view class="goods-nav"><uni-goods-nav :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			// 商品详情
			detail: {},
			// 商品导航组件参数
			options: [
				{
					icon: 'shop',
					text: '店铺'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0
				}
			],
			// 商品导航组件按钮组参数
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#ff0000',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff'
				}
			]
		};
	},
	onLoad(option) {
		this.getGoodsDetail(option.goods_id);
	},
	// 监听
	watch: {
		// 定义监听器，指向配置对象，监听购物车数量
		cartTotal: {
			// 监听器处理函数
			handler(newVal) {
				this.options[1].info = newVal;
			},
			// 侦听开始之后被立即调用
			immediate: true
		}
	},
	methods: {
		// 获取商品详情
		async getGoodsDetail(goods_id) {
			const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', {
				goods_id
			});
			if (res.meta.status !== 200) return uni.$showMsg();
			res.message.goods_introduce.replace(/<img /g, '<img style="display:block;"').replace(/webp/, 'jpg');
			this.detail = res.message;
		},
		// 图片预览
		preview(index) {
			uni.previewImage({
				current: index,
				urls: this.detail.pics.map(x => x.pics_big)
			});
		},
		// 底部商品导航左侧点击事件
		onClick(e) {
			if (e.index === 1) {
				// 跳转至指定tabBar页面
				uni.switchTab({
					url: '/pages/cart/index'
				});
			} else {
				console.log('店铺');
			}
		},
		// 映射
		...mapMutations('m_cart', ['addCart']),
		// 底部商品导航右侧点击事件
		buttonClick(e) {
			if (e.index === 0) {
				const goods = {
					goods_id: this.detail.goods_id,
					goods_name: this.detail.goods_name,
					goods_price: this.detail.goods_price,
					goods_count: 1,
					goods_small_logo: this.detail.goods_small_logo,
					goods_state: true
				};
				// 加入购物车
				this.addCart(goods);
			} else {
				console.log('立即购买');
			}
		}
	},
	computed: {
		// 映射
		...mapGetters('m_cart', ['cartTotal'])
	}
};
</script>

<style lang="scss">
// 主容器
.container {
	padding-bottom: 50px;

	// 轮播图
	swiper {
		height: 500rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 商品信息区域
	.goods-info-box {
		display: flex;
		flex-direction: column;
		padding: 10px 10px 10px 10px;

		// 价格
		.price {
			font-size: 16px;
			color: #d81e06;
			margin: 15px 0 10px 0;
		}

		// 主体信息
		.goods-body {
			display: flex;

			// 标题
			.title {
				border-right: 1px solid #efefef;
				font-size: 13px;
			}

			// 收藏
			.collect {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 20%;

				text {
					font-size: 12px;
					color: gray;
				}
			}
		}

		// 运费
		.freight {
			font-size: 12px;
			color: gray;
			margin: 5px 0 20px 0;
		}
	}

	// 底部商品导航
	.goods-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
}
</style>
